<template>
  <div class="home">
    <Background />
    <div class="content">
      <List />
    </div>
    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import List from '@/components/List.vue'
import Background from '@/components/Background.vue'
import Footer from '@/components/layout/Footer.vue'
// import { useBackPrev } from '@/hooks/useBackPosition'

export default defineComponent({
  name: 'App',
  components: {
    List,
    Background,
    Footer
  },
  setup () {
    // todo
    // const scrollDistance = ref(0)
    // useBackPrev(scrollDistance)
    return {
      // scrollDistance
    }
  }
})
</script>

<style>
  .home {
    /* height: 100vh; */
    /* display: flex;
    flex-direction: column; */
    /* margin-top: 3.6rem; */
  }
  .content {
    flex-grow: 1;
    margin: 20px auto 0;
    max-width: 1126px;
    width: 100%;
  }
  .footer {
    padding: 2.5rem;
    border-top: 1px solid #eaecef;
    text-align: center;
    color: #4e6e8e;
  }
</style>
